<template>
  <!-- loading加载组件 -->
  <div class="loading" v-if="isAttendanceLoadingRef">
    <a-spin tip="加载中···" size="large" delay="500" />
  </div>
  <BaseLoading v-if="isAttendanceLoadingRef" />

  <div class="attendance-container" v-if="!isAttendanceLoadingRef">
    <div class="list-container" v-if="userInfo.identity === 1">
      <template
        v-if="userInfo.identity === 1"
        v-for="(item, index) in chartList"
        :key="index"
      >
        <ViolationChart
          :id="index"
          :title="item.title"
          :renderList="item.renderList"
        />
      </template>
    </div>
    <div
      class="list-container"
      style="[{width: userInfo.identity === 1 ? '49.8%' : '100%', background-color: '#fff'}]"
    >
      <template v-for="(item, index) in tableList" :key="index">
        <ViolationTable :title="item.title" :renderList="item.renderList" />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import ViolationChart from "./components/ViolationChart.vue";
import ViolationTable from "./components/ViolationTable.vue";
import appStore from "@/store";
import { toRefs } from "@vue/reactivity";
import { storeToRefs } from "pinia";
onMounted(async () => {
  try {
    await appStore.useAttendanceStore.getAttendanceData();
  } catch (error) {
    console.log(error, "omomount-attendance");
  }
});
// 解构拿到出勤统计数据
const { attendanceData, isAttendanceLoadingRef } = storeToRefs(
  appStore.useAttendanceStore
);
// 再解构拿到各部分的数据
const { tableList, chartList } = toRefs(attendanceData.value);
console.log(tableList, "tableList");
console.log(chartList, "chartList");
// 从本地获取用户信息
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
console.log("userInfo", userInfo);
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
